import React, {Component} from 'react';
import { Button, Table, Input} from 'antd';
import BreadcrumbBar from '@/common/BreadcrumbBar';//面包屑组件
import ToolBar from '@/common/ToolBar';//操作栏组件

const Search = Input.Search;

class User extends Component {
	constructor(props) {
		super(props);	
		this.state = {
			dataSource:[{
				id: '`2`',
				code: 'huyanbin',
				fullname: '郑爽',
				enabled: '启用',
				roles: '工程师'
			  }]
		}
		  
		this.columns = [
			{ title: '账号', dataIndex: 'code', key: 'code', },
			{ title: '姓名', dataIndex: 'fullname', key: 'fullname', },
			{ title: '状态', dataIndex: 'enabled', key: 'enabled', },
			{ title: '角色', dataIndex: 'roles', key: 'roles', },
			{ title: '操作', dataIndex: 'operator', key: 'operator', 
				render: (text, record, index) => {
					return (
						<div>
							<Button>重置密码</Button>&nbsp;
							<Button type="danger">启用</Button>&nbsp;
							<Button>编辑</Button>
						</div>
					)
				}
			},
		];
	}
    render() {
        return (
            <div>
		   		<BreadcrumbBar one="系统管理" two="用户管理"/>
				<ToolBar>
					<Button>添加用户</Button>
					<Search placeholder="请输入姓名" 
						onSearch={value => console.log(value)}
						style={{ width: 200, float: 'right' }}
					/>
				</ToolBar>
				<Table 
					dataSource={this.state.dataSource} 
					rowKey={record => record.id}
					columns={this.columns} 
					loading={false}
					pagination={{
						showTotal:(total, range) => `共 ${total} 条  显示  ${range[0]}-${range[1]} 条`
					}}
					bordered={true} 
				/>
		   </div>
        )

    }
}

export default User;